<template>
  <div class="addressManage">
    <!-- 表格 -->
    <el-card class="formTable">
      <!-- //新增按钮 -->
      <div class="addBtn">
        <el-button size="mini" type="primary" @click="handleEdit"
          >新增</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" border size="small">
        <el-card>
          <el-card class="main-header" shadow="never" />
          <el-table-column
            label="序号"
            fixed="left"
            type="index"
            align="center"
          />
          <el-table-column
            label="地址名称"
            align="center"
            width="200"
            prop="addressName"
          />
          <el-table-column
            label="默认发货地址"
            prop="sendStatus"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <div>
                默认发货地址
                <el-switch
                  v-model="scope.row.sendStatus"
                  :active-value="1"
                  :inactive-value="0"
                  @change="setSend(scope.row)"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="收货人姓名"
            prop="name"
            align="center"
            width="140"
          />
          <el-table-column
            label="收货人电话"
            prop="phone"
            align="center"
            width="160"
          />
          <el-table-column label="收货人详细地址" align="center" width="240">
            <template slot-scope="scope">
              <div>
                {{ scope.row.province }}
                {{ scope.row.city }}
                {{ scope.row.region }}
              </div>
              <div>
                {{ scope.row.detailAddress }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="默认收货地址"
            prop="receiveStatus"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <div>
                默认收货地址
                <el-switch
                  v-model="scope.row.receiveStatus"
                  :active-value="1"
                  :inactive-value="0"
                  @change="setReceive(scope.row)"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            align="center"
            width="220"
          />
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="150"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-card>
      </el-table>
    </el-card>
    <!-- 编辑修改 -->
    <el-drawer
      class="innerEdit"
      style="width: 60%; height: 800px; margin: 120px auto"
      title="地址详情"
      direction="ttb"
      size="50%"
      :before-close="handleClose"
      :visible.sync="innerDrawer"
    >
      <el-form
        ref="productInfo"
        class="detailInfo"
        :model="addressInfo"
        label-width="130px"
        size="mini"
      >
        <el-form-item label="发货地址">
          <el-input v-model="addressInfo.addressName" style="width: 80%" />
        </el-form-item>
        <el-form-item label="发货人姓名">
          <el-input v-model="addressInfo.name" style="width: 80%" />
        </el-form-item>
        <el-form-item label="发货人手机号">
          <el-input v-model="addressInfo.phone" style="width: 80%" />
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="addressInfo.cityCode" style="width: 80%" />
        </el-form-item>
        <el-form-item label="收货人地址">
          <el-cascader
            v-model="selectedOptions"
            style="width: 80%"
            size="mini"
            :options="options"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="addressInfo.detailAddress" style="width: 80%" />
        </el-form-item>
        <el-form-item label="是否默认收货地址">
          <el-switch
            v-model="addressInfo.receiveStatus"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="是否默认发货地址">
          <el-switch
            v-model="addressInfo.sendStatus"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="" size="normal">
          <div class="btn" size="small">
            <el-button type="primary" @click="addAddress">确定</el-button>
            <el-button @click="handleClose">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { regionDataPlus } from 'element-china-area-data'
import provinceAndCity from '@/components/city/province.json'
import {
  addressList,
  saveAddress,
  addressDetail,
  deleteAddress,
  update,
  setReceiveOne,
  setSendOne
} from '@/api/orders/addressManage/index'
import mixins from '@/mixins/index'
export default {
  mixins: [mixins],
  data() {
    return {
      options: regionDataPlus,
      selectedOptions: [],
      tableData: [],
      addressInfo: {},
      innerDrawer: false,
      isModify: false,
      provinceAndCity,
      search: { current: 1, size: 6 }
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      addressList().then((res) => {
        console.log(res)
        this.tableData = res.data.items
      })
    },
    // 删除地址
    handleDelete(id) {
      this.delData(id, deleteAddress)
    },
    // 控制地址
    handleEdit(val) {
      if (val.id) {
        // isModify控制按钮字体
        this.isModify = true
        this.innerDrawer = true
        this.addressInfo = val
        // 进入 初始化地址信息 数组形式
        this.selectedOptions = val.cityCode.split(',')
      } else {
        this.isModify = false
        this.innerDrawer = true
        this.addressInfo = {}
        this.selectedOptions = this.$options.data().selectedOptions
      }
    },
    // 添加或修改地址
    addAddress() {
      if (this.isModify) {
        update(this.addressInfo).then((res) => {
          if (res.success) {
            this.$message.success('修改成功!')
            this.isModify = false
            this.innerDrawer = false
          } else {
            this.$message.error('修改失败!')
          }
        })
      } else {
        saveAddress(this.addressInfo).then((res) => {
          if (res.success) {
            this.$message.success('添加成功!')
            this.isModify = false
            this.innerDrawer = false
            this.init()
          } else {
            this.$message.error('添加失败!')
          }
        })
      }
    },
    // 设置默认发货地址
    setSend(val) {
      setSendOne({ id: val.id }).then((res) => {
        if (res.success) {
          this.$message.success('设置默认发货地址成功!')
          this.init()
        } else {
          this.$message.success('设置默认发货地址失败,请重新设置!')
          this.init()
        }
      })
    },
    // 设置默认收货地址
    setReceive(val) {
      setReceiveOne({ id: val.id }).then((res) => {
        if (res.success) {
          this.$message.success('设置默认收货地址成功!')
          this.init()
        } else {
          this.$message.success('设置默认收货地址失败,请重新设置!')
          this.init()
        }
      })
    },
    // 确认关闭
    handleClose(done) {
      this.$confirm('地址还未添加,是否退出?')
        .then((_) => {
          this.innerDrawer = false
          done()
        })
        .catch((_) => {})
    },
    // 三级联动地址 重写地区代码
    handleChange(value) {
      this.addressInfo.cityCode = value.join(',')
      this.search.province = ''
      this.search.city = ''
      this.search.district = ''
      for (var k = 0, lengthk = provinceAndCity.length; k < lengthk; k++) {
        // 确定省
        if (provinceAndCity[k].code === value[0]) {
          this.search.province = provinceAndCity[k].name
          if (
            provinceAndCity[k].cityList &&
            value.length >= 2 &&
            value[1] !== ''
          ) {
            for (
              var i = 0, lengthi = provinceAndCity[k].cityList.length;
              i < lengthi;
              i++
            ) {
              // 确定市
              if (
                provinceAndCity[k].cityList[i].code == value[1] ||
                provinceAndCity[k].cityList.length == 1
              ) {
                this.search.city = provinceAndCity[k].cityList[i].name
                // 确定区
                if (
                  provinceAndCity[k].cityList[i].areaList &&
                  value.length === 3 &&
                  value[2] !== ''
                ) {
                  for (
                    var j = 0,
                      lengthj = provinceAndCity[k].cityList[i].areaList.length;
                    j < lengthj;
                    j++
                  ) {
                    if (
                      provinceAndCity[k].cityList[i].areaList[j].code ===
                      value[2]
                    ) {
                      this.search.district =
                        provinceAndCity[k].cityList[i].areaList[j].name
                      break
                    }
                  }
                }
                break
              }
            }
          }
          break
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.addressManage {
  .innerEdit {
    .detailInfo {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 30px;
      margin-top: -20px;
      .el-form-item {
        width: 50%;
        padding-bottom: 10px;
        .btn {
          margin: 20px auto;
          transform: translateX(-30%);
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
